Aller au contenu principal
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gestion des modèles d'affichage public

Les modèles d'affichage public sont la base de vos visualisations personnalisées. Ils définissent la mise en page, la structure et les éléments visuels qui seront appliqués à vos installations. Ce guide complet couvre tout, de la création de modèles de base à des techniques de conception avancées.

📋 Aperçu​

Qu'est-ce que les modèles d'affichage public ?​

Les modèles servent de plans réutilisables qui :

  • 📐 Définissent des mises en page visuelles pour vos affichages publics
  • 🧩 Organisent les blocs de contenu et leur positionnement
  • 🎨 Établissent une cohérence de conception à travers plusieurs installations
  • ⚙️ Permettent un déploiement rapide de visualisations standardisées
  • 🔄 Soutiennent des mises à jour faciles sur toutes les configurations liées

Avantages clés​

AvantageDescription
🚀 EfficacitéCréer une fois, utiliser dans plusieurs installations
🎯 CohérenceMaintenir des normes de conception uniformes
🔧 FlexibilitéModification facile sans recréer depuis le début

🚀 Prise en main​

Flux de travail des modèles​

  1. 📐 Concevoir la mise en page - Planifiez votre structure visuelle
  2. 🎨 Créer un modèle - Construire en utilisant l'éditeur de modèles
  3. 💾 Sauvegarder le modèle - Stocker pour réutilisation à travers les installations

Conditions préalables​

Avant de créer des modèles, assurez-vous d'avoir :

  • ✅ Un compte SmartgridX avec les autorisations appropriées
  • ✅ Des objectifs de conception clairs pour votre visualisation
  • ✅ Des exigences de contenu (images, points de données, mises en page)

🎛️ Interface de gestion des modèles​

Accéder au gestionnaire de modèles​

infographicimage

Étapes de navigation :

  1. Connectez-vous à votre compte SmartgridX
  2. Naviguez vers 'Affichages publics' dans la barre latérale principale
  3. Cliquez sur le bouton 'Modèle d'affichage public' sur la page d'aperçu

Cela ouvre l'interface de gestion des modèles où vous pouvez afficher, créer, modifier et supprimer des modèles.

Tableau d'aperçu des modèles​

infographicimage

Actions disponibles :

  • ➕ Ajouter - Bouton vert pour commencer la création de modèles
  • ✏️ Modifier - Modifier la conception du modèle existant
  • 🗑️ Supprimer - Supprimer un modèle inutilisé

🎨 Processus de création de modèle​

Démarrer un nouveau modèle​

Cliquez sur le bouton "Créer un nouveau modèle" pour ouvrir l'interface de l'éditeur de modèles.

Configuration de l'en-tête du modèle​

infographicimage

Paramètres du titre​

Titre du modèle :

  • But : Identifie le modèle dans les listes et configurations
  • Meilleures pratiques : Utilisez des noms descriptifs, spécifiques au projet
  • Exemples : "Dashboard-KPI-Usine", "Mise-en-page-Suivi-Energie", "Affichage-Multi-Zone"

Configuration des marges​

Les paramètres de marge définissent la zone de sécurité à partir des bords de l'affichage :

Curseur de marge (0-100px) :

  • 📐 Plage : 0 à 100 pixels du bord de l'affichage
  • 🎯 But : Crée un espace de sécurité pour éviter la coupure de contenu
  • 📱 Application : Assure la visibilité sur divers types d'affichages
  • ⚙️ Recommandation : Utiliser 10-20px pour les affichages standard, 30-50px pour les écrans bord à bord

Impact visuel :

  • 0px de marge - Le contenu s'étend jusqu'aux bords de l'affichage
  • 50px de marge - Le contenu commence à 50 pixels de tous les bords
  • 100px de marge - Zone de sécurité maximale avec un espacement substantiel des bords

Fonctionnalité de sauvegarde​

Le bouton 💾 Sauvegarder (en haut à droite) vous permet de sauvegarder votre modèle actuel.

🧩 Système de mise en page des blocs​

Comprendre le système de grille​

infographicimage

Fondateurs de la grille​

L'éditeur de modèles utilise un système de grille basé sur des pourcentages de 100×100 :

Propriétés de la grille :

  • 📐 Dimensions : 100 unités de largeur × 100 unités de hauteur
  • 📊 Unités : Valeurs en pourcentage (1 unité = 1 % de la dimension totale)
  • 🎯 Précision : Permet un positionnement et un dimensionnement précis
  • 📱 Réactif : S'adapte automatiquement aux différentes tailles d'écran

Exemples de mise en page des blocs​

Configuration : 100 de largeur × 100 de hauteur
Résultat : Couverture plein écran
Cas d'utilisation : Visualisation unique large, image plein écran

┌─────────────────────────────────┐
│                                 │
│         BLOCM COMPLET           │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipulation des blocs​

Ajouter des blocs​

Méthode : Cliquez sur le bouton "Ajouter un bloc" (en haut à droite de l'éditeur)
Résultat : Un nouveau bloc apparaît avec des dimensions par défaut
Étapes suivantes : Positionner et redimensionner selon les besoins

Positionnement des blocs​

Glisser-déposer :

  • 🖱️ Cliquez et maintenez n'importe quel bloc pour le déplacer
  • 📍 L'aperçu en temps réel montre la position pendant le déplacement
  • 🧲 L'alignement sur la grille aide à un alignement précis
  • 👁️ Des guides visuels apparaissent pour aider à l'alignement

Redimensionnement des blocs​

Poignée de redimensionnement :

  • 📐 Le coin inférieur droit affiche la poignée de redimensionnement lorsque le bloc est sélectionné
  • 🔧 Faites glisser pour redimensionner à la fois la largeur et la hauteur simultanément
  • 📊 Les valeurs en temps réel affichent les dimensions actuelles

Contrôles de précision​

infographicimage

Panneau de position droite​

Lorsqu'un bloc est sélectionné, le panneau de droite fournit :

Contrôles de position :

  • 📍 Position X - Décalage horizontal depuis le bord gauche (0-100)
  • 📍 Position Y - Décalage vertical depuis le bord supérieur (0-100)
  • 🎨 Z-Index - Ordre des couches pour les blocs qui se chevauchent
  • 📏 Largeur - Pourcentage de la largeur du bloc (1-100)
  • 📏 Hauteur - Pourcentage de la hauteur du bloc (1-100)

⚙️ Configuration des blocs​

Types et propriétés des blocs​

infographicimage

Accéder à la configuration des blocs​

Méthode :

  1. Sélectionnez un bloc dans la toile de l'éditeur
  2. Le panneau de configuration apparaît en bas de l'écran
  3. Le menu déroulant des types de blocs est l'option de configuration principale

Remarque : Tous les blocs ne sont pas actuellement configurables. Cela changera à mesure que le développement progressera. D'autres types de blocs seront ajoutés dans les futures mises à jour.

Types de blocs disponibles​

But : Afficher des images statiques, des logos, des arrière-plans, des GIFs
Options de configuration :

  • 📁 Source de l'image - Téléchargez ou indiquez une URL qui sera utilisée par défaut pour ce bloc. Vous pouvez laisser cela vide si vous souhaitez forcer la sélection d'une image dans la configuration

Cas d'utilisation :

  • Logos d'entreprise et branding
  • Images de fond
  • Photos d'équipement
  • GIFs

Exemples de modèles​

infographicimage

Cet exemple montre un modèle bien structuré avec :

  • 📊 Une organisation claire des blocs avec des étiquettes descriptives
  • 📐 Un espacement et un alignement appropriés
  • 🎯 Des types de blocs fonctionnels pour différents besoins de contenu

Nom des blocs dans cet exemple :

  • Chaque bloc montre son objectif prévu
  • Une étiquetage clair aide à la configuration
  • Une organisation logique soutient la maintenance

📚 Documentation connexe​

Étapes suivantes​

Après avoir créé votre modèle :

  1. ⚙️ Configurer les installations - Appliquer les modèles à des installations spécifiques
  2. 🎛️ Lier les contrôleurs - Connecter le matériel d'affichage
  3. 🚀 Guide de démarrage - Vue d'ensemble du flux de travail

Sujets avancés​

  • 🎨 Techniques de conception avancées
  • 📊 Intégration de données personnalisées
  • 🔄 Mises à jour automatiques de modèles
  • 👥 Collaboration sur des modèles multi-utilisateurs

💡 Résumé des meilleures pratiques​

Conception de modèles​

✅ Principes de conception :

  • 🎯 Restez simple - Concentrez-vous sur les informations essentielles
  • 📱 Conception réactive - Testez sur différentes tailles d'écran
  • 🎨 Maintenez la consistance - Utilisez des couleurs et des mises en page standardisées

Gestion des modèles​

✅ Conseils d'organisation :

  • 📝 Utilisez des noms descriptifs - Facilitez la recherche des modèles
  • 🔄 Maintenance régulière - Supprimez les modèles non utilisés
  • 👥 Partagez des standards - Assurez la cohérence de l'équipe

🎨 Prêt à concevoir ? Avec votre modèle créé et configuré, vous êtes prêt à déployer des visualisations époustouflantes à travers vos installations SmartgridX !